import { Empty, SafeArea } from 'antd-mobile'
import React, { useEffect } from 'react'
import { SourceEnum, TrainEnum } from '@/const'
import styles from './index.module.less'
import iconEdit from '@/resource/archives/icon_edit.png'
import emptyImg from '@/resource/png_zanwu.png'
import { isNullData } from '@/utils'
import { observer } from 'mobx-react'
import store from './store'
import Questionnaire from './components/questionnaire'
import UploadPhoto from './components/uploadPhoto'
import ImageBox from './components/imageBox'
import FiveFinger from './components/fiveFinger'
import Rainbow from './components/rainbow'
import Position from './components/position'
import TrainingSync from './components/trainingSync'
import Resume from './components/resume'
import PostMatch from './components/postMatch'
import PageLoading from '@/components/Global/PageLoading'

const ArchiveDetail = () => {
    const { fileDetail, loading, getFileDetail, getUserInfo, clickOperation, fillInOnline, clearData } = store || {}

    useEffect(() => {
        document.title = '我的档案'
        /** 定时器 作用从下级页面返回后 请求接口不是最新数据 */
        setTimeout(() => {
            getUserInfo()
            getFileDetail()
        }, 200)

        return () => {
            clearData()
        }
    }, [])
    /** 标签样式 */
    const tagMap = new Map([
        [0, { color: '#FFAC0F', title: '未完成' }],
        [1, { color: '#00D085', title: '已完成' }],
    ])
    /** 实训组件 */
    const TrainRender = () => {
        switch (fileDetail.type) {
            case TrainEnum.QUESTION:
                return <PostMatch />
            case TrainEnum.FIVE_FINGER:
                return <FiveFinger />
            case TrainEnum.RAINBOW:
                return <Rainbow />
            case TrainEnum.INTENTION_POST:
                return <Position />
            case TrainEnum.RESUME:
                return <Resume />
            default:
                return <></>
        }
    }

    return (
        <div className={styles.archive_detail}>
            <div className={styles.header_wrap}>
                <div className={styles.header_box}>
                    <div className={styles.header_title}>
                        <span>{fileDetail?.dossier_name?.split(' ')[0]}</span>
                        <span>{fileDetail?.dossier_name?.split(' ').slice(1).join(' ')}</span>
                    </div>
                    <span className={styles.tag} style={{ backgroundColor: tagMap.get(Number(fileDetail?.is_finished || 0))?.color }}>
                        {tagMap.get(Number(fileDetail?.is_finished || 0))?.title}
                    </span>
                    <div className={styles.header_btns}>
                        {fileDetail?.type === TrainEnum.QUESTION && (
                            <div className={styles.header_btn} onClick={() => clickOperation(SourceEnum.FILL_IN_ONLINE, fillInOnline)}>
                                <img src={iconEdit} />
                                <span>在线填写</span>
                            </div>
                        )}
                        {/* 上传照片 */}
                        <UploadPhoto />
                        {/* 实训同步 */}
                        {(fileDetail?.type !== TrainEnum.QUESTION || fileDetail?.id === '16') && <TrainingSync />}
                    </div>
                </div>
            </div>
            {loading ? (
                <PageLoading />
            ) : isNullData(fileDetail?.detail) ? (
                <Empty description="暂未提交档案" image={emptyImg} imageStyle={{ width: '180px' }} className={styles.empty} />
            ) : (
                <div className={styles.container}>
                    {fileDetail?.fill_type === SourceEnum.FILL_IN_ONLINE && <Questionnaire />}
                    {fileDetail?.fill_type === SourceEnum.UPLOAD_PHOTO && <ImageBox />}
                    {fileDetail?.fill_type === SourceEnum.TRAIN_SYNC && TrainRender()}
                    <p className={styles.source}>来源：{fileDetail.fill_type_name}</p>
                    <SafeArea position="bottom" />
                </div>
            )}
        </div>
    )
}

export default observer(ArchiveDetail)
